import * as React from "react";
import { Separator } from "@/components/ui/separator";
import { Shell } from "@/components/shell";
import { DepartmentMenuAccessManager } from "./_components/department-menu-access-manager";
import { getAllDepartmentsTree, getCurrentCompanyInfo } from "@/lib/users/knox-service";
import { useTranslation } from "@/i18n";

interface menuAccessDeptPageProps {
  params: Promise<{ lng: string }>
}

export default async function DepartmentMenuAccessPage({ params }: menuAccessDeptPageProps) {
  const { lng } = await params
  const { t } = await useTranslation(lng, 'menu')

  // Promise들을 생성하여 클라이언트 컴포넌트에 전달
  const departmentsPromise = getAllDepartmentsTree();
  const companyInfo = await getCurrentCompanyInfo();

  return (
    <Shell>
      <div className="space-y-6">
        {/* 헤더 섹션 */}
        <div className="space-y-2">
          <h1 className="text-2xl font-bold tracking-tight">
            {t('menu.information_system.menu_access_dept')}
          </h1>
          {/* <p className="text-muted-foreground"> */}
          {/*   Knox 조직도를 기반으로 부서별 도메인을 할당하여 메뉴 접근 권한을 관리할 수 있습니다. */}
          {/*   상위 부서를 선택하면 하위 부서들도 자동으로 포함됩니다. */}
          {/* </p> */}
        </div>

        <Separator />

        {/* 메인 관리 컴포넌트 */}
        <DepartmentMenuAccessManager 
          departmentsPromise={departmentsPromise}
          companyInfo={companyInfo}
        />
      </div>
    </Shell>
  );
}